import React, { useEffect, useState } from 'react';

class ChantApi{
  constructor(){
    this.lister={}
  }

  // 订阅  （传入用户id和calback状态）
  open(id,calback){
    // 判断是否有该用户 有就不添加，，没有就添加
    if(!this.lister[id]){
      this.lister[id]=[]
    }
    // 给每个用户添加一个状态
    this.lister[id].push(calback)

    console.log('open我出发了')
  }

  unopen(id,calback){
    // indexOf 检测有没有字符出现
    var index = this.lister[id].indexOf(calback);
    // splice(从哪个位置开始，删除几个，添加那些元素)
    this.lister[id].splice(index,1)
  }


  // 发布
  puash(staticc){
    // Object.keys() 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
    Object.keys(this.lister).forEach((id) => {
      const lister_arr=this.lister[id]
      // 循环每个数组的cablack状态  然后把staticc给calback
 lister_arr.forEach((calback) => {
  calback(staticc)
 });
    })
 
  }
}
const chat = new ChantApi()

// chat.open(1,(calback) => {
//   console.log('1号的在线状态',calback)
// })

setTimeout(() => {
  console.log('时间触发了')
  chat.puash('Offline')
  
}, 1000);


function  FriendStatus(props) {
  // 定义了一个状态isOnline为空
  const [isOnline,setIsOnline] =useState(null)

  // 触发事件  
  function handleStatusChange(status){
    console.log('handleStatusChange',status)
    setIsOnline(status);
  }



//   首先介绍两个概念，纯函数和副作用函数。

// 纯函数（ Pure Function ）：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，这样的函数被称为纯函数。
// 副作用函数（ Side effect Function ）：如果一个函数在运行的过程中，除了返回函数值，还对主调用函数产生附加的影响，这样的函数被称为副作用函数。
// useEffect 就是在 React 更新 DOM 之后运行一些额外的代码，也就是执行副作用操作，比如请求数据，设置订阅以及手动更改 React 组件中的 DOM 等。


  // 第一次初始化  第二次更新
  useEffect(() => {
    console.log('useEffect')

    // 第一次初始化  dimont
    // 第二次更新  diupdate
    // 一个数据接口获取好友上线状态


    // 触发订阅事件 传入一个id，并触发事件  handleStatusChange
    chat.open(props.id,handleStatusChange);

    return () => {
      chat.unopen(props.id,handleStatusChange);
    };
  })
  if(isOnline === null){
    console.log('if1')
    return 'Loading...'
    
  }
  console.log('if出发了')
  return isOnline
}
export default FriendStatus;

// 整体思路
// 首先 useEffect 先初始化
// 然后 在渲染过程中触发一些事件
// 处理触发事件
// 然后处理事件
// 进行更新